<template>
	<div id='page4'>
		<!-- 眉头 -->
		<div class='brows'>
			<div class='intro'>
				<p> </p>
				<p>联系 <span class='other'>Wo</span></p>
				<p> </p>
			</div>
			<div class='english'>Contact Me. I am waiting for you!</div>
		</div>

		<!-- 表格 -->
		<div class='contact_table'>
			<!-- http://192.168.1.108:8080/MyHomePage/insertContact.do  -->
			<form method="post">
				<table>
					<tr>
						<td>
							<input autocomplete="off" class='input_toget text' id='name' type="text" placeholder="Your name..." required>
						</td>
						<td>
							<input autocomplete="off" class='input_toget text' id='email' type="email" placeholder="Your email..." required>
						</td>
						<td>
							<input autocomplete="off" class='input_toget text' id='subject' type="text" placeholder="Subject..." required>
						</td>
					</tr>
					<tr>
						<td colspan="3">
							<textarea autocomplete="off" class='input_toget textarea' id="context" placeholder="正文" rows="10" required></textarea>
						</td>
					</tr>
					<tr>
						<td colspan="3">
							<input class='submit_btn' type="button" @click='sendMsg' value='发  送  消  息'>
						</td>
					</tr>
				</table>
			</form>
		</div>
	</div>
</template>
<script>
	export default {
		name: 'page4',
		data() {
			return {

			}
		},
		created() {

		},
		methods: {
			sendMsg: function() {
				var that = this;

				var name = document.getElementById('name').value;
				var email = document.getElementById('email').value;
				var subject = document.getElementById('subject').value;
				var context = document.getElementById('context').value;

				if (name == null || name == '' || email == null || email == '' ||
					subject == null || subject == '' || context == null || context == '') {
					this.$notify.error({
						title: '错误',
						message: '请您完整填写表单！'
					});
				} else {

					this.$axios.get('https://www.mokeylife.cn/MyHomePage/insertContact.do', {
							params: {
								name: name,
								email: email,
								subject: subject,
								context: context
							}
						})
						.then(function(response) {
							that.$notify.success({
								title: '消息',
								message: '感谢您对我的留言！'
							});
						})
						.catch(function(error) {
							that.$notify.error({
								title: '错误',
								message: '网络错误，攻城狮正在修复！'
							});
						});

				}
			}
		}
	}

</script>
<style scoped="true">
	* {
		margin: 0px;
		padding: 0px;
	}

	#page4 {
		top: 416%;
		width: 71%;
		margin-left: 27%;
		margin-top: 160px;
		padding-top: 20px;
		position: absolute;
		padding-bottom: 80px;
		font-family: '微软雅黑';
		border-bottom: 1px solid #EEEEEE;
	}

	.brows {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.english {
		color: #343434;
		font-size: 15px;
		line-height: 120px;
		font-family: 'Open Sans', sans-serif;
		margin-right: auto;
	}

	.intro {
		height: 100px;
		color: #232323;
		font-size: 32px;
		padding-left: 10px;
		margin-right: 50px;
		line-height: 100px;
		border-left: 3px blue solid;
	}

	.other {
		color: #45489A;
		font-weight: bolder;
	}

	.english {
		color: #343434;
		font-size: 15px;
		line-height: 120px;
		white-space: pre;
		font-family: 'Open Sans', sans-serif;
	}

	.contact_table {
		width: 100%;
		overflow: hidden;
	}

	.text {
		width: 80%;
	}

	.contact_table table {
		width: 90%;
		margin: 0 auto;
		border-spacing: 0px 20px;
		border-collapse: separate;
	}

	.input_toget {
		border: none;
		color: #AAAAAA;
		padding: 10px 2% 10px 2%;
		background-color: #F4F4F4;
	}

	.textarea {
		width: 96%;
		text-indent: 0px;
	}

	.submit_btn {
		width: 100%;
		height: 45px;
		line-height: 45px;
		text-align: center;
		background-color: #45489A;
		transition: all 0.2s;
		font-size: 15px;
		font-weight: bolder;
		color: #FFFFFF;
		border: none;
	}

	.submit_btn:hover {
		color: black;
		background-color: #F4F4F4;
	}

</style>
